<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@include file="/pages/hy/common.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.treetable.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/jquery.treetable.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/jquery.treetable.theme.default.css">
<script type="text/javascript">

$(function () {
	//1.初始化Table
    var oTable = new TableInit();
    oTable.Init();
  	//2.初始化Button的点击事件
    var oButtonInit = new ButtonInit();
    oButtonInit.Init();
    $("#clazzId").val("0");
});


var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $('#llm_clazz').bootstrapTable({
            url: '${pageContext.request.contextPath }/Chart/queryByCid.do',         //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            //pagination: false,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            //pageNumber:1,                       //初始化加载第一页，默认第一页
            //pageSize: 10,                       //每页的记录行数（*）
            //pageList: [10, 20, 30],        //可供选择的每页的行数（*）
            clickToSelect: false,                //是否启用点击选中行
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            detailView: false,                   //是否显示父子表
            columns:  [{
                checkbox: true
            },{
            	field: 'jan',
                title: '一月'
            }, {
                
            	field: 'feb',
                title: '二月'
            },{
            	field: 'mar',
                title: '三月'
            }, {
                
            	field: 'apr',
                title: '四月'
            },{
            	field: 'may',
                title: '五月'
            }, {
                
            	field: 'june',
                title: '六月'
            },{
            	field: 'july',
                title: '七月'
            }, {
                
            	field: 'aug',
                title: '八月'
            },{
            	field: 'sept',
                title: '九月'
            }, {
                
            	field: 'oct',
                title: '十月'
            },{
            	field: 'nov',
                title: '十一月'
            }, {
                
            	field: 'dec',
                title: '十二月'
            }],
        });
	}
    
    //得到查询的参数
    oTableInit.queryParams = function (params) {
        var temp = {  
            //limit: params.limit,  
            //offset: params.offset/params.limit + 1,  
            cid: $.trim($("#clazzId").val()),
        };
        return temp;
    };
    return oTableInit;
}

var ButtonInit = function () {
    var oInit = new Object();
    var postdata = {};

    oInit.Init = function () {
        //初始化页面上面的按钮事件
    };
    return oInit;
};


$(document).ready(function(){
    $.ajax({
        "type" : 'post',
        "url" : '${pageContext.request.contextPath }/llmReport/reslist.do',
        "dataType" : "json",
        "success" : function(data) {
        	$.each(data.data, function(idx, obj) {
                $("#treeTable").append("<tr data-tt-id=\"" + obj.id + "\" data-tt-parent-id=\"" + obj.fid + "\"><td>" + obj.cname + "</td><td>" + obj.monthMoney + "</td><td>" + obj.yearMoney 
                		+ "</td><td><button id='btn_detail' type='button' onclick='doDetail(" + obj.id + ")'>详情</button></td></tr>");
            });
            $("#treeTable").treetable({  
                expandable : true,
                initialState:"expanded",
                //expandable : true
                clickableNodeNames:true,//点击节点名称也打开子节点.
                indent : 50//每个分支缩进的像素数。
            });
        }
    });
});

function doDetail(id){
	$('#clazzId').val(id);
	$('#llm_clazz').bootstrapTable('refresh');
	$("#detailTable").modal(open);
}

</script>
</head>
<body>
	<table id="treeTable" style="width:800px">  
        <tr>  
             <td>科目</td> 
             <td>本月合计</td>
             <td>本年合计</td> 
             <td>操作</td> 
         </tr>  
    </table>  
    
    <!-- 添加 -->
	<div class="modal fade bs-example-modal-lg" id="detailTable" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
		data-backdrop="static" data-keyboard="false"
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true" onclick="resets()">&times;</button>
					<h4 class="modal-title" id="addModalLabel">金额详情</h4>
				</div>
				<div class="modal-body">
					<input type="hidden" id="clazzId">
					 <!-- 数据表格 -->
        			<table id="llm_clazz"></table>
				</div>
			</div>
		</div>
	</div>
	
</body>
</html>